<template>
    <el-container style="height: 100vh;border: 1px solid #fff" class="all">
        <el-container>
            <el-header style="height: 0px">
            </el-header>

        <el-tabs  v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="目录" name="first">

                <div>
                <catalog></catalog>
                <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            </div>

            </el-tab-pane>
            <el-tab-pane label="索引" name="second">
                <div>
                <index></index>
                <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            </div>
            </el-tab-pane>
            <el-tab-pane label="搜索" name="third">
                <div>
                    <search></search>
               <br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                </div>
            </el-tab-pane>

        </el-tabs>
    </el-container>
    </el-container>
</template>

<script>
    import  Search from './search'
    import  Index from './index'
    import Catalog from './catalog'
    export default {
      created () {
        document.title = '专家知识系统'
      },
        components: {
            Search,
            Index,
            Catalog,
        },
        data() {
            return {
                activeName: 'first'
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    };
</script>

<style scoped>
    .all {
        height: 100%;
        width: 100%;
    }
    * {
        margin: 0;
        padding: 0;
    }
    .bg {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .bg h3 {
        float: left;
        line-height: 40px;
        font-size: 14px;
        letter-spacing: 5px;
        font-weight: bold;
        color: white;
        margin: 0 auto;
        margin-left: 0px;
    }
    .bg span {
        font-size: 8px;
        margin-right: 30px;
        color: white;
    }
    .bg span a {
        color: white;
        text-decoration: none;
    }

    .bg span a:hover {
        color: #42b983;
    }

</style>